<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>千峰教育大前端Vue教学</title>
  <!-- 引入vue -->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body style="margin:100px;font-size:22px;">
  <div id="app">
    父组件
    <Child v-if="show" name="老大">
      <Grandchild name="大胖"></Grandchild>
    </Child>
    <Child name="老二"></Child>
    <button @click="show=false">去掉老大节点</button>
  </div>
  <script>
    function VueLifeCycle(tag, level) {
      var prefix = '|___';
      level = level || 0;
      while (level--) {
        prefix += '___'
      }
      prefix += ': [' + tag + ']:';
      return [
        'beforeCreate', 'created',
        'beforeMount', 'mounted',
        'beforeUpdate', 'updated',
        'beforeUnmount', 'unmounted',
      ].reduce((r, o) => ({ ...r, [o]() { console.log(prefix + (o === 'beforeCreate' ? '' : this.name) + o); } }), {});
    };
    // 创建应用
    const app = Vue.createApp({
      mixins: [VueLifeCycle('parent', 1)],
      data() {
        return {
          name: '父节点',
          show: true,
        }
      },
      setup() {
        console.log('|______: [parent]:setup');
      }
    });
    app.component('Child', {
      template: `
      <div>我是子节点{{name}}<slot></slot></div>
      `,
      props: ['name'],
      mixins: [VueLifeCycle('child', 2)],
      setup() {
        console.log('|_________: [child]:setup');
      }
    });
    app.component('Grandchild', {
      template: `
      <div>我是孙子节点{{name}}</div>
      `,
      props: ['name'],
      mixins: [VueLifeCycle('grand child', 3)],
      setup() {
        console.log('|____________: [grand child]:setup');
      }
    });
    // 挂载应用
    app.mount('#app');
  </script>
</body>

</html>